<template>
	<div class="select-date todoView">
			<div class="dayView">
				<div class="dayViewCalendar"><i class="iconArr icon-keyboard_arrow_up"></i>
					<i class="iconArr icon-keyboard_arrow_down"></i>
					<div class="leftHandel blink">
						<!--<i class="iconArr"></i>-->
					</div>
					<!--<i class="calendarCircle cc1"></i>-->
					<!--<i class="calendarCircle cc2"></i>-->
					<ul class="dayViewCalendarUl">
						<li v-for="item in days" :data-date="item.date" :data-week="item.week" @click="clickDay(item.day)"><span :data-week="item.week" :class="['hasDian',item.date==selectedDayDate?'active':'',item.hasTask?'has-task':'']">{{item.day}}</span></li>
						
						<!--<li data-date="2017-06-19" data-week="周一" style="display: none;"><span data-week="周一" class="hasDian">19</span></li>
						<li data-date="2017-06-20" data-week=" 周二 " style="display: none;"><span data-week=" 周二 " class="hasDian">20</span></li>
						<li data-date="2017-06-21" data-week="周三" style="display: none;"><span data-week="周三" class="hasDian">21</span></li>
						<li data-date="2017-06-22" data-week=" 周四 " style="display: none;"><span data-week=" 周四 " class="hasDian">22</span></li>
						<li id="showMonth" class="notItem" style="display: none;"><span></span></li>
						<li class="firstLi" data-date="2017-06-23" data-week="周五 "><span data-week="周五 " class="hasDian">23</span></li>
						<li data-date="2017-06-24" data-week="周六"><span data-week="周六" class="hasDian">24</span></li>
						<li data-date="2017-06-25" data-week="周日"><span data-week="周日" class="hasDian">25</span></li>
						<li data-date="2017-06-26" data-week="周一"><span data-week="周一" class="hasDian">26</span></li>
						<li data-date="2017-06-27" data-week=" 周二 "><span data-week=" 周二 " class="hasDian">27</span></li>
						<li data-date="2017-06-28" data-week="周三"><span class="active ui-droppable hasDian" data-week="周三">28</span></li>
						<li data-date="2017-06-29" data-week=" 周四 "><span data-week=" 周四 " class="ui-droppable hasDian">29</span></li>
						<li data-date="2017-06-30" data-week="周五 "><span data-week="周五 " class="ui-droppable hasDian">30</span></li>
						<li data-date="2017-07-01" data-week="周六"><span data-week="周六" class="ui-droppable hasDian">01</span></li>
						<li data-date="2017-07-02" data-week="周日"><span data-week="周日" class="ui-droppable hasDian">02</span></li>
						<li class="lastLi" data-date="2017-07-03" data-week="周一"><span data-week="周一" class="ui-droppable hasDian">03</span></li>
						<li id="gotoToday" class="notItem" style="display: none;"><span>今</span></li>
						<li data-date="2017-07-04" data-week=" 周二 " style="display: none;"><span class="hasDian">04</span></li>
						<li data-date="2017-07-05" data-week="周三" style="display: none;"><span class="hasDian">05</span></li>
						<li data-date="2017-07-06" data-week=" 周四 " style="display: none;"><span class="hasDian">06</span></li>
						<li data-date="2017-07-07" data-week="周五 " style="display: none;"><span class="hasDian">07</span></li>
						<li data-date="2017-07-08" data-week="周六" style="display: none;"><span class="hasDian">08</span></li>-->
					</ul>
				</div>
			</div>
		</div>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	import moment from "moment";
	import api from '../../api';
	import { taskAndTag } from "../../common/mixin";
	import { mixinPc } from "../../common/mixinPc";
	var initPage=function(me){
//		时间轴上下切时间
		$('body').on('click','.dayView .iconArr.icon-keyboard_arrow_up',function(){
			var liLength=$('.dayViewCalendarUl li').length;
			var ulHeight=$('.dayViewCalendarUl').height();
			
			if(me.tabIndex==0){
				//$('.dayViewCalendarUl').css('top','40px')
				return;
			}
			me.tabIndex--;
			$('.dayViewCalendarUl').css({
				'transform':'translateY('+ulHeight*me.tabIndex*-1+'px)',
				'transition':'all 0.1s linear'
			})
		})
		$('body').on('click','.dayView .iconArr.icon-keyboard_arrow_down',function(){
			var liLength=$('.dayViewCalendarUl li').length;
			var ulHeight=$('.dayViewCalendarUl').height();
			if(ulHeight*(me.tabIndex+1)<40*liLength&&(ulHeight*(me.tabIndex+2)>40*liLength)){
				$('.dayViewCalendarUl').css({
					'transform':'translateY('+(ulHeight-40*liLength)+'px)',
					'transition':'all 0.1s linear'
				})
				me.tabIndex++;
				return;
			}
			if(ulHeight*(me.tabIndex+1)>40*liLength){
				return;
			}
			me.tabIndex++;
			$('.dayViewCalendarUl').css({
				'transform':'translateY('+ulHeight*me.tabIndex*-1+'px)',
				'transition':'all 0.1s linear'
			})	
		})
	}
	export default{
		name:'dateLine',
		data(){
			return{
				tabIndex:0,
			}
			
		},
		mixins: [taskAndTag,mixinPc],
		computed:{
			...mapState({
				dates:state=>state.z39.days,
				selectedDayDate:state=>state.z39.selectedDayDate,
				showMonth:state=>state.z39.showMonth,
			}),
			days:function(){
				var monthDays=[];
				var nowYear=new Date(this.showMonth).getFullYear();
				var nowMonth=new Date(this.showMonth).getMonth()+1
					nowMonth=nowMonth>=10?nowMonth:"0"+nowMonth;
				console.log("day:",nowMonth);
				var curMonthDays = new Date(nowYear, nowMonth, 0).getDate();
				for(var i=1;i<=curMonthDays;i++){
					var day=String(i).length>1?String(i):('0'+String(i))
					monthDays.push({
						date:nowYear+'-'+nowMonth+'-'+day,
						day:day,
						week:moment(nowYear+'-'+nowMonth+'-'+day).format('d'),
						hasTask:false
					})
				}
				var _this=this;
				var formatDays=monthDays.map(function(item,index,arr){
					switch (item.week){
						case '1':
							item.week='周一';
							break;
						case '2':
							item.week='周二';
							break;
						case '3':
							item.week='周三';
							break;
						case '4':
							item.week='周四';
							break;
						case '5':
							item.week='周五';
							break;
						case '6':
							item.week='周六';
							break;
						case '0':
							item.week='周日';
							break;
						default:
							break;
					}
					if(_this.dates.indexOf(item.date)>-1){
						item.hasTask=true;
					}
					return item
				})
				return formatDays
			}
		},
		watch:{
			'showMonth':function(){
				this.tabIndex=0;
				$('.dayViewCalendarUl').css({
					'transform':'translateY(0px)',
					'transition':'all 0s linear'
				})
				//$('.dayViewCalendarUl').css('top','40px')
			}
		},
		methods:{
			clickDay:function(day){
				this.$store.commit({ type: "z39/changeDate", value:day,dateType:'day' });
				var _this=this;
				this.getTasksList({day:this.selectedDayDate})
				
			}
		},
		mounted(){
			initPage(this);
			let today = moment().format("D") ;
			if(today>15) $('.dayView .iconArr.icon-keyboard_arrow_down').click();
			this.clickDay(today);
//			this.$emit('name',1)
		}
	}
</script>

<style>
</style>